<template>
  <div style="padding:20px;width:100%">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="!!this.$getvl('id')?'编辑商品':'添加商品'" name="编辑商品">
        <div class="c-flex c-a-c mb15">
          <div class="mr10 label">所属商城</div>
          <div style="width:300px">
            <el-select v-model="menuFour" placeholder="请选择" class="c-box-flex" clearable>
              <el-option :label="obj.name" :value="obj.id" v-for="obj in sourceList" :key="obj.id"></el-option>
            </el-select>
          </div>
        </div>
        <div class="c-flex c-a-c mb15">
          <div class="mr10 label">商品类别</div>
          <div style="width:300px">
            <el-select v-model="menuOne" placeholder="请选择" class="c-box-flex" clearable>
              <el-option :label="obj.name" :value="obj.id" v-for="obj in typeList" :key="obj.id"></el-option>
            </el-select>
          </div>
        </div>
        <div class="c-flex c-a-c mb15">
          <div class="mr10 label">商品名称</div>
          <div style="width:300px">
            <el-input
              class="c-box-flex"
              placeholder="请输入商品名称 最多50个字"
              v-model="goodsName"
              oninput="this.value = this.value.length>50 ? this.value.substring(0,50) : this.value "
              clearable
            ></el-input>
          </div>
        </div>

        <div class="c-flex c-a-c mb15">
          <div class="mr10 label">商品副标题</div>
          <div style="width:300px">
            <el-input
              class="c-box-flex"
              placeholder="请输入商品副标题 最多50个字"
              oninput="this.value = this.value.length>50 ? this.value.substring(0,50) : this.value "
              v-model="goodsDescribe"
              clearable
            ></el-input>
          </div>
        </div>

        <div class="c-flex c-a-c mb15">
          <div class="mr10 label">上架内容</div>
          <div style="width:300px">
            <el-radio-group v-model="radio2">
              <el-radio :label="3">轮播图</el-radio>
              <el-radio :label="6">详情图</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="c-flex c-a-c mb15">
          <div class="mr10 label">图片上传</div>
          <div v-show="radio2==3">
            <el-upload
              :limit="4"
              :file-list="fileList"
              :on-success="success"
              :on-remove="remove"
              :on-exceed="()=>{this.$message.warning('最大允许上传4张图片')}"
              action="http://wyds.new.91wangjing.com/common/fileUpload"
              list-type="picture-card"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </div>
          <div v-show="radio2==6">
            <el-upload
              :limit="1"
              :file-list="detailList"
              :on-success="Dsuccess"
              :on-remove="Dremove"
              :on-exceed="()=>{this.$message.warning('只允许单张图片')}"
              action="http://wyds.new.91wangjing.com/common/fileUpload"
              list-type="picture-card"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </div>
        </div>

        <div class="c-flex c-a-c mb15">
          <div class="mr10 label">成本价</div>
          <div style="width:300px">
            <el-input class="c-box-flex" placeholder="请输入成本价" v-model="baseAmount" clearable></el-input>
          </div>
        </div>
        <div class="c-flex c-a-c mb15">
          <div class="mr10 label">商品标价</div>
          <div style="width:300px">
            <el-input class="c-box-flex" placeholder="请输入商品标价（仅展示用）" v-model="price" clearable></el-input>
          </div>
        </div>
        <div class="c-flex c-a-c mb15">
          <div class="mr10 label">售价</div>
          <div style="width:300px">
            <el-input class="c-box-flex" placeholder="请输入正常售价" v-model="truthAmount" clearable></el-input>
          </div>
        </div>
        <div class="c-flex c-a-c mb15">
          <div class="mr10 label">会员价</div>
          <div style="width:300px">
            <el-input class="c-box-flex" placeholder="请输入会员价（仅展示用）" v-model="vipAmount" clearable></el-input>
          </div>
        </div>
        <div class="c-flex c-a-c mb15">
          <div class="mr10 label">商品基础销量</div>
          <div style="width:300px">
            <el-input
              class="c-box-flex"
              placeholder="请输入商品基础销量（仅展示用）"
              v-model="baseSales"
              clearable
            ></el-input>
          </div>
        </div>
        <div class="c-flex c-a-c mb15">
          <div class="mr10 label">是否支持退款</div>
          <div style="width:300px">
            <el-switch
              v-model="refund"
              active-value="YES"
              inactive-value="NO"
              active-text="是"
              inactive-text="否"
            ></el-switch>
          </div>
        </div>
        <div class="c-flex c-a-c mb15">
          <div class="mr10 label">是否立即上架</div>
          <div style="width:300px">
            <el-switch
              v-model="goodsState"
              active-value="ONLINE"
              inactive-value="OFFLINE"
              active-text="是"
              inactive-text="否"
            ></el-switch>
          </div>
        </div>
        <div>
          <el-button type="primary" @click="addPeripheral">确定</el-button>
          <el-button @click="go">取消</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="添加规格" name="添加规格" v-if="tabShow">
        <div class="c-flex mb15">
          <div class="c-box-flex vh"></div>
          <div>
            <el-button
              type="primary"
              @click="dialogVisible=true; typeName=null; guigeID=null;truthAmount1= null; baseAmount1=null; stock=null"
            >新增</el-button>
          </div>
        </div>
        <el-table :data="List" style="width: 100%" :max-height="maxHeight" border>
          <el-table-column prop="typeName" label=" 规格名称"></el-table-column>
          <el-table-column prop="baseAmount" label="成本价(元)"></el-table-column>
          <el-table-column prop="truthAmount" label="售价(元)"></el-table-column>
          <el-table-column prop="stock" label="库存(件)"></el-table-column>
          <el-table-column prop label="操作">
            <template slot-scope="scope">
              <div>
                <el-button type="primary" size="mini" @click="eidt(scope.row)">编辑</el-button>
                <el-button type="danger" size="mini" @click="deleteGuige(scope.row.id)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="mt20 c-flex">
          <div class="c-box-flex vh"></div>
          <el-pagination
            @current-change="setPage"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="pageTotal"
          ></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>

    <el-dialog title="新增规格" :visible.sync="dialogVisible" width="50%">
      <div ref="table">
        <div class="c-flex c-a-c mt10">
          <div style="width:100px;text-align:center" class="mr10">规格名称</div>
          <div style="width:300px">
            <el-input class="c-box-flex" placeholder="请输入规格名称" v-model="typeName" clearable></el-input>
          </div>
        </div>
        <div class="c-flex c-a-c mt10">
          <div style="width:100px;text-align:center" class="mr10">成本价（元）</div>
          <div style="width:300px">
            <el-input class="c-box-flex" placeholder="请输入成本价（元）" v-model="baseAmount1" clearable></el-input>
          </div>
        </div>
        <div class="c-flex c-a-c mt10">
          <div style="width:100px;text-align:center" class="mr10">售价（元）</div>
          <div style="width:300px mt10">
            <el-input class="c-box-flex" placeholder="请输入售价（元）" v-model="truthAmount1" clearable></el-input>
          </div>
        </div>
        <div class="c-flex c-a-c mt10">
          <div style="width:100px;text-align:center" class="mr10">库存（件）</div>
          <div style="width:300px">
            <el-input class="c-box-flex" placeholder="请输入库存（件）" v-model="stock" clearable></el-input>
          </div>
        </div>
      </div>
      <div class="c-flex c-aj-c mt20">
        <el-button type="primary" @click="addOrUpdSpec">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //列表相关
      List: [],
      pageTotal: null,
      currentPage: 1,
      pageSize: 10,
      maxHeight: 480,

      activeName: "编辑商品",
      discountWay: null,
      radio2: 3,
      menuFour: !!this.$getvl("id") ? null : 73,
      menuOne: null,
      goodsName: null,
      truthAmount: null,
      baseAmount: null,
      price: null,
      vipAmount: null,
      baseSales: null,
      stock: null,
      goodsState: "ONLINE",
      refund: "NO",
      goodsDescribe: null,
      bannerList: [],
      typeList: [],
      sourceList: [],

      //图片上传
      fileList: [],
      detailList: [],

      dialogVisible: false,
      orderList: [],
      typeName: null,
      truthAmount1: null,
      baseAmount1: null,
      guigeID: null,
      goodsNo: null,
      pageTotal: null,
      tabShow: false
    };
  },
  mounted() {
    this.getsupplierId(74, "bannerList"); //品牌
    this.getsupplierId(44, "typeList"); //类别
    this.getsupplierId(70, "sourceList"); //来源

    this.tabShow = !!this.$getvl("id");
    if (!!this.$getvl("id")) {
      this.mearchDetail(this.$getvl("id"));
    }
  },

  methods: {
    go() {
      history.go(-1);
    },
    remove(file, fileList) {
      this.fileList = fileList;
    },
    success(response, file, fileList, list) {
      this.fileList = fileList;
    },
    Dremove(file, fileList) {
      this.detailList = fileList;
    },
    Dsuccess(response, file, fileList, list) {
      this.detailList = fileList;
    },
    handleClick() {},
    getsupplierId(id, name) {
      //供应商
      this.$axios
        .get("/shop/classify/classifyMenuList", {
          params: {
            id: id
          }
        })
        .then(res => {
          if ((res.data.code = 200)) {
            this[name] = res.data.data;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    addPeripheral() {
      if (!this.menuFour) {
        this.$message.error("请选择所属商城");
        return false;
      }

      if (!this.menuOne) {
        this.$message.error("请选择商品类别");
        return false;
      }
      if (!this.goodsName) {
        this.$message.error("请输入商品名称");
        return false;
      }
      if (!this.goodsDescribe) {
        this.$message.error("请输入商品副标题");
        return false;
      }
      if (JSON.stringify(this.fileList) == "[]") {
        this.$message.error("请上传轮播图");
        return false;
      }
      if (JSON.stringify(this.detailList) == "[]") {
        this.$message.error("请上传详情图片");
        return false;
      }
      if (!this.baseAmount && this.baseAmount != 0) {
        this.$message.error("输入商品成本价");
        return false;
      }
      if (!this.price && this.price != 0) {
        this.$message.error("输入商品标价");
        return false;
      }
      if (!this.truthAmount && this.truthAmount != 0) {
        this.$message.error("输入商品售价");
        return false;
      }
      if (!this.vipAmount && this.vipAmount != 0) {
        this.$message.error("输入商品会员价");
        return false;
      }
      if (!this.baseSales && this.baseSales != 0) {
        this.$message.error("请输入基础销量");
        return false;
      }

      var fileList = [];
      this.fileList.map((obj, index) => {
        if (!!obj.response) {
          fileList.push(obj.response.data);
        } else {
          fileList.push(obj.url);
        }
      });

      this.$axios
        .post("/spGoods/addOrUpdMearch", {
          id: this.$getvl("id") ? this.$getvl("id") : null,
          menuFour: this.menuFour,
          menuOne: this.menuOne,
          goodsName: this.goodsName,
          goodsDescribe: this.goodsDescribe,
          truthAmount: this.truthAmount,
          price: this.price,
          vipAmount: this.vipAmount,
          baseAmount: this.baseAmount,
          baseSales: this.baseSales,
          goodsImg: fileList.join(","),
          goodsState: this.goodsState,
          refund: this.refund,
          goodsUrl: this.detailList[0].response
            ? this.detailList[0].response.data
            : this.detailList[0].url
        })
        .then(res => {
          console.log(res.data);
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            setTimeout(() => {
              history.go(0);
            }, 1000);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    mearchDetail(id) {
      this.$axios
        .get("/spGoods/mearchDetail", {
          params: {
            id: id
          }
        })
        .then(res => {
          if ((res.data.code = 200)) {
            var data = res.data.data;
            this.menuFour = data.menuFour;
            this.menuOne = data.menuOne;
            this.goodsName = data.goodsName;
            this.truthAmount = data.truthAmount;
            this.baseAmount = data.baseAmount;
            this.price = data.price;
            this.vipAmount = data.vipAmount;
            this.baseSales = data.baseSales;
            this.goodsState = data.goodsState;
            this.refund = data.refund;
            this.goodsDescribe = data.goodsDescribe;
            this.goodsNo = data.goodsNo;

            var arr = data.goodsImg.split(",");
            arr.map((obj, index) => {
              this.fileList.push({
                url: obj
              });
            });

            this.detailList = [{ url: data.goodsUrl }];

            this.getGuige(this.currentPage, this.pageSize, data.goodsNo);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

    getGuige(currentPage, pageSize, goodsNo) {
      this.$axios
        .get("/spGoodsSpec/list", {
          params: {
            pageNum: currentPage,
            pageSize: pageSize,
            goodsNo: goodsNo
          }
        })
        .then(res => {
          console.log(res);
          if ((res.data.code = 200)) {
            this.List = res.data.data.list;
            this.pageTotal = res.data.data.total;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    eidt(row) {
      this.dialogVisible = true;
      this.typeName = row.typeName;
      this.guigeID = row.id;
      this.stock = row.stock;
      this.baseAmount1 = row.baseAmount;
      this.truthAmount1 = row.truthAmount;
    },
    //分页
    setPage(currentPage) {
      this.currentPage = currentPage;
      this.$nextTick(() => {
        this.getGuige(this.currentPage, this.pageSize, this.goodsNo);
      });
    },
    deleteGuige(id) {
      this.$axios
        .post("/spGoodsSpec/addOrUpdSpec", {
          id: id,
          deleted: 1
        })
        .then(res => {
          this.getGuige(this.currentPage, this.pageSize, this.goodsNo);
        })
        .catch(error => {
          console.log(error);
        });
    },
    addOrUpdSpec() {
      this.$axios
        .post("/spGoodsSpec/addOrUpdSpec", {
          id: this.guigeID ? this.guigeID : null,
          typeName: this.typeName,
          stock: this.stock,
          baseAmount: this.baseAmount1,
          truthAmount: this.truthAmount1,
          goodsNo: this.goodsNo
        })
        .then(res => {
          this.getGuige(this.currentPage, this.pageSize, this.goodsNo);
          this.dialogVisible = false;
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>
<style lang="less" scoped>
.label {
  width: 100px;
  text-align: right;
}
</style>
